<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <div class="box"></div>
</body>
<script>
    {
        // 1. 可以在同一个页面有多个容器
        // const root1 = ReactDOM.createRoot(document.querySelector('#root'))
        // const root2 = ReactDOM.createRoot(document.querySelector('.box'))
        // root1.render('我是root')
        // root2.render('我是box')
    }
    {
        // 2. 同一个容器可以进行多次渲染，后面的结果会覆盖前面的
        // const root = ReactDOM.createRoot(document.getElementById('root'))
        // root.render('第一次渲染')
        // // 会覆盖前面的
        // root.render('第2次渲染')
    }
    {
        // 3. 同一个容器不允许被多次指定为react容器，没有报错，会弹警告。不建议这样操作
        // const root1 = ReactDOM.createRoot(document.getElementById('root'))
        // const root2 = ReactDOM.createRoot(document.getElementById('root'))
        // root1.render(123)
        // root2.render(222)
    }
    {
        // 4. 不能将 html body 指定为 react容器
        // const root = ReactDOM.createRoot(document.documentElement)
        // root.render(123123)

        // const root = ReactDOM.createRoot(document.body)
        // root.render(222)
    }
    {
        // 5. 支持链式调用
        ReactDOM.createRoot(document.getElementById('root')).render('root')
    }
</script>

</html>